<html>
<head>
<script src="libs/request.min.js" ></script>
<script src="libs/ag-grid.min.js"></script>
<script src="libs/adapter.min.js"></script>
<script src="libs/EventEmitter.min.js" ></script>
<script src="janusvideoroom.json" ></script>
<script src="janusvideoroom.js" ></script>
<script src="webrtcstreamer.json" ></script>
<script src="webrtcstreamer.js" ></script>
<style type="text/css">
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
footer {
  text-align: center; 
}
</style> 
</head>
<body> 
	Janus Url:<input id="janusUrl" type="text" size="50" /> 
	Room id:<input id="janusRoom" type="number" />
	<div id="myGrid" style="height: 80%;" class="ag-fresh"></div>
	<footer id="footer"></footer>
</body>
<script>
	// set default value
	document.querySelector('#janusUrl').value  = janusRoomConfig.url;
	document.querySelector('#janusRoom').value = janusRoomConfig.roomId;

	var bus = new EventEmitter();
	bus.addListener('state', clientCallBack);	
	
	var janus;	
	
	// columns
	var columnDefs = [
	    { headerName: "Video"  , field: "video" , cellClass: "cell" ,  width:64,   
              cellRenderer: function(params) { 
	            var videoElement = document.createElement('video');
                    videoElement.id = JSON.stringify(params.data.url);
		    videoElement.className = "cell";
		    videoElement.width = 128;
		    videoElement.height = 96;
		    videoElement.muted = true;
		    videoElement.addEventListener('click', function() {
		         window.open(webrtcConfig.url + "/webrtcstreamer.html?video=" + encodeURIComponent(params.data.url.video) + "&audio=" + encodeURIComponent(params.data.url.audio));
                    });
                    return videoElement;
              } 
            },
	    { headerName: "Url"    , field: "url"   , cellClass: "cell" , 
              cellRenderer: function(params) { 
                    var url = "video:" + params.value.video
                    if (params.value.audio) {
                        url += "<br/>audio:" + params.value.audio
                    }
                    return url;
              } 
            },
	    { headerName: "Status" , field: "status", cellClass: "cell" , 
              cellRenderer: function(params) { 
                    return '<b>' + params.value.toUpperCase() + '</b>'; 
              } 
            },
	    { headerName: "RoomId" , field: "roomid", cellClass: "cell"  },
	    { headerName: "Action" , cellClass: "cell", 
	      field: "action", 
	      cellRenderer: function(params) { 
	        var eDiv = document.createElement('div');
	        var eButton = document.createElement('button');
		eButton.innerHTML = params.value;
		eDiv.appendChild(eButton);
		eButton.addEventListener('click', function() {
			if (params.value === "join") {
				params.data.roomid = document.querySelector('#janusRoom').value;
				params.api.refreshCells([params.node], ['roomid']);
				
				if (!janus) {
					janus = new JanusVideoRoom(document.querySelector('#janusUrl').value, webrtcConfig.url, bus);
				}
				janus.join(parseInt(params.data.roomid), params.data.url, JSON.stringify(params.data.url));
				
			} else {
				janus.leave(parseInt(params.data.roomid), params.data.url, JSON.stringify(params.data.url));
			}
		});

		return eDiv;
              } 
	    }
	];

	// options
	var gridOptions = {
		enableFilter: true,
		enableSorting: true,
		enableColResize: true,
		columnDefs: columnDefs,
		rowHeight: 60,
		onGridReady: function($event) { $event.api.sizeColumnsToFit(); }
	};
	
	// fill grid
	new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);	

	function clientCallBack(name, status) {		
		var updatedNodes = [];
		gridOptions.api.forEachNode( function(node) {
			var data = node.data;
			if (JSON.stringify(data.url) === name) {
			    data.status = status;
			    if (status === "up") {
				data.action = "leave";
			    } else if (status === "down") {
				data.roomid = "";
				data.action = "join";
			    }
			    updatedNodes.push(node);
			}
		});
		gridOptions.api.refreshCells({rowNodes:updatedNodes, columns:['status','action','roomid']});
	}
	
	// ------------------------------------------
	// init device list 
	// ------------------------------------------	
	function onGetDeviceList(remoteDeviceList) {
	
		var rowData = [];
		remoteDeviceList.forEach(function(item) {
			rowData.push({url: item , status:"down", action:"join" })
		});
		gridOptions.api.setRowData(rowData);
		
		// connect video
		gridOptions.api.forEachNode( function(node) {
			var data = node.data;
			node.webrtc = new WebRtcStreamer(JSON.stringify(data.url), webrtcConfig.url)
			node.webrtc.connect(data.url.video, data.url.audio, janusRoomConfig.options);
		});
	}
	
	// ------------------------------------------
	// Fill version
	// ------------------------------------------	
	function onVersion(version) {
		document.getElementById("footer").innerHTML = "<p><a href='https://github.com/mpromonet/webrtc-streamer'>WebRTC-Streamer</a>"
							+ " " + version.split(" ")[0] + "</p>";
	}
	
	// load
	window.onload         = function() { 
		request( 'GET',  webrtcConfig.url + "/api/getMediaList" ).done(
			function (response) {
				if (response.statusCode === 200) { onGetDeviceList(JSON.parse(response.body)) }
			});
		request( 'GET',  webrtcConfig.url + "/api/version" ).done(
			function (response) {
				if (response.statusCode === 200) { onVersion(JSON.parse(response.body)) }
			});
	} 
	
	// unload
	window.onbeforeunload = function() { 
		gridOptions.api.forEachNode( function(node) {
			if (node.webrtc) {
				node.webrtc.disconnect();
				node.webrtc = null;
			}
		});
	}
</script>
</html>

